<style lang="less" scoped>
@import "../assets/css/config.less";
.page {
  padding: 40px 0;
  margin: 0 auto;
  width: 1000px;
}
.demo-card {
  width: 100%;
  margin: 20px 0;
  cursor: default;
}
.demo-title {
  padding: 0 15px;
  text-align: left;
  font-family: "黑体";
  font-size: 1.5em;
}
.add-demo-code {
  float: left;
  margin-bottom: 20px;
  font-size: 14px;
  padding: 6px 15px;
  border: 2px solid @color1;
  border-radius: 4px;
  color: #fff;
  // font-weight: 500;
  outline: none;
  background-color: @color1;
  &:hover{
    background-color: @color2;
    color: @white;
  }
}
.guide_demo {
  display: flex;
  justify-content: start;
  padding: 8px 15px;
}
.header{
  position: fixed;
  top:0;
  width: 100%;
  min-width: 1210px;
  z-index: 999;
}
.button{
  line-height: 36px;
  background-color: @color6;
  border: 1px solid @color1;
  color: @color1;
  border-radius: 18px;
  font-size: 14px;
  width: 120px;
  margin: 10px 4px;
  letter-spacing: 2px;
  outline: none;
  cursor: pointer;
}
.button:hover{
  background-color: @color2;
  color: @white;
}
.button:active{
  background-color: @color3;
  color: @white;
}
</style>
<template>
  <div id="index">
    <div class="header">
      <myheader></myheader>
    </div>
    
    <func-button-group
      :scrollTop="scrollTop"
      :list="buttonList"
      @onClick="handleButtonClick"
    />
    <connect-us-vue v-if="showComt" @cancel="cancel"></connect-us-vue>
    <div  style="background-color: #fff;margin-top: 60px" id="content">
      
      <div :style="{padding: '0 24px 24px','background-color': 'white','min-width': '1210px'}">
        <!-- <div style="padding: 15px 6px">
          <my-breadcrumb :prop="breadcrumbList"></my-breadcrumb>
        </div> -->
        <div class="page">
          <button
            class="add-demo-code"
            v-if="userGroup!=='0'"
            @click="addDemo"
          >添加案例代码</button>
          <div v-if="demoList.length!==0">
            <el-card class="demo-card">
              <div
                class="demo-title"
              >基于案例的开源代码，可以学习、研究、剖析，也可以进行实验，也可以创意修改出各种各样新奇的效果，这些都是探索。那么探索是如何展开的呢？点击下方按钮，感受一下探索的整个历程吧！</div>
              <div class="guide_demo">
                <button class="button" @click="guide">探索示例</button>
              </div>
              <div
                class="demo-title"
              >
                感受过探索的乐趣，相信你已经跃跃欲试了，在下面的案例中挑选你喜欢的一个进行改造探索吧！相信你会有不一样的收获。
              </div>
            </el-card>
            <el-card shadow="hover" v-for="(item, index) in demoList" class="demo-card" :key="index">
              <div class="demo-title" @click="toDemoPractise(item._id)">{{ item.name }}</div>
            </el-card>
          </div>
          <div v-if="demoList.length===0">
            <el-card shadow="hover" class="demo-card">
              <div class="demo-title">暂无实践案例</div>
            </el-card>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import header from "../components/header.vue";
import myBreadcrumb from "../components/myBreadcrumb.vue";
import funcButtonGroup from "../components/funcButtonGroup.vue";
import connectUs from "../components/connectUs.vue";
import { debounce } from "../utils/debounce"
import { getCodeList } from "../api/api";
export default {
  name: "demoPractise",
  data: function() {
    return {
      bg: {
        width: `${window.innerWidth}px`,
        height: "auto",
        overflow: "auto"
      },
      demoList: [],
      userGroup: "",
      breadcrumbList: [{
        name: '案例',
        blod: true
      }],
      
      buttonList: [
        {
          name: "goTop",
          title: "顶部",
          back: "回到顶部",
          icon: "el-icon-arrow-up",
        },
        {
          name: "connectUs",
          title: "反馈",
          back: "联系我们",
          icon: "el-icon-service",
        },
      ],
      showComt: false,
      scrollTop: 0
    };
  },
  mounted() {
    let that = this;
    window.addEventListener('scroll', debounce(function(e){
      that.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    }, 50, false))



    this.userGroup = JSON.parse(this.$store.state.user).userGroup;
    this.getDemoList();
  },
  components: {
    myheader: header,
    'my-breadcrumb': myBreadcrumb,
    "func-button-group": funcButtonGroup,
    connectUsVue: connectUs,
  },
  methods: {
    handleButtonClick(data) {
      let scrollEle = document.getElementById("point-content");
      switch (data) {
        case "goTop":
          document.documentElement.scrollTop = document.body.scrollTop = 0;
          return;
        case "connectUs":
          this.connectUs();
          return;
      }
    },
    connectUs() {
      this.showComt = true;
    },
    cancel() {
      this.showComt = false;
    },
    getDemoList() {
      getCodeList()
        .then(res => {
          if (res.state === true) {
            this.demoList = res.codeList;
          } else {
            this.$Message.error(res.msg);
          }
        })
        .catch(error => {
          this.$Message.error(error.status);
        });
    },
    toDemoPractise(id) {
      sessionStorage.setItem(
        "runnob",
        JSON.stringify({
          from: "demoPractise",
          demoId: id
        })
      );
      this.$router.push({
        name: "runnob"
      });
    },
    addDemo() {
      sessionStorage.setItem(
        "runnob",
        JSON.stringify({
          from: "demoPractise-add"
        })
      );
      this.$router.push({
        name: "runnob"
      });
    },
    guide() {
      this.$router.push({
        name: "demoGuide"
      });
    }
  }
};
</script>
